<html>
  <head><title>ATCA Online Log</title>
    <link rel="stylesheet" type="text/css"
	  href="/dojo/resources/dojo.css" />

    <style type="text/css">
    <!--
       .topbar {position: fixed; left: 5px; top: 5px; width: 99%; height: 70px; z-index: 2;
                background-color: #159bcb; border: 0px; padding: 0px;}
       .topbar td {background-color: #FFFFFF; width: 70px; padding: 0px; border: 0px;}
       .topbar img {border-width: 0; border: 0px;}
       .leftnav {position: fixed; border-width: 0; border-color: #000000; border-style: solid; 
                 font-family: verdana, sans-serif; top: 90px; padding: 2px; background: #ffffff; 
                 font-weight: 400; width: 160px; bottom: 10px; overflow: auto; font-size: small;}
       .rightcontent {position: fixed; left: 170px; right: 5px; bottom: 10px; top: 90px; z-index: 0; 
                      overflow: auto; font-family: sans-serif; padding-right: 15px; padding-left: 10px;}
       .topback {background-image: url(csiro50backgr.gif); width: 100%; height: 70px;}
       .topback td {text-align: left; color: white; padding: 10px;}
       .toptitle {font-size: 90%; font-family: sans-serif; font-weight: bold;}
       .logEntries {border: 1px solid #000000; width: 100%;}
       .logEntries th {font-weight: bold; text-align: center; background-color: lightgreen;
                       padding-left: 10px; padding-right: 10px; width: 120px;}
       .logEntries td {font-weight: normal; text-align: left; padding-left: 10px; background-color: yellow;
                       padding-right: 10px;}
       .editingbox {width: 100%; height: 70px; border: 3px solid #cccccc; padding: 5px;}
      -->
    </style>

    <script type="text/javascript"
	    src="/dojo/dojo.js">
    </script>

    <script type="text/javascript">
      dojo.require("dojo.date.stamp");

      var editCounter=0;
      var changing = false;

      function editBlur(entry){
        if (changing){
          var box=dojo.byId(this.id+"_field");
          var boxContents=box.value;
          if (boxContents==""){
            boxContents="suck this bitches";
          }
          var newEntry=boxContents.replace(/\n/g,"<br>");
	  this.innerHTML=newEntry;
	  changing=false;
        }
      }

      function editBox(entry){
        if (!changing){
	  var oldEntry=this.innerHTML;
	  var newEntry=oldEntry.replace(/\<br\>/g,"\n");
          this.innerHTML="<textarea name='textarea' id='"+this.id+"_field' "+
                         "class='editingbox'>"+
	                 newEntry+"</textarea>";
          changing=true;
	  var myBox=dojo.byId(this.id+"_field");
          dojo.connect(myBox,'onblur',this,editBlur);
	  myBox.focus();
        }
      }

      function addEntry(){
        var container = dojo.byId("logEntries");
        var newRow = dojo.create("tr");

        var thisDate = new Date();
        var dateNow = dojo.date.stamp.toISOString(thisDate,{zulu: true, selector: "date"});
        var timeNow = dojo.date.stamp.toISOString(thisDate,{zulu: true, selector: "time"});
        var timePattern = /T(.*)Z/;
        var timeElements = timeNow.replace(timePattern,"$1");
        var fullTimeString = dateNow+"<br />"+timeElements;

	var newTimeEditable=dojo.create("span",{innerHTML: fullTimeString, id: "edit"+editCounter});
	editCounter++;
	var newTime=dojo.create("th");
	newTime.appendChild(newTimeEditable);
        var newEditable=dojo.create("span",{innerHTML: "click to edit", id: "edit"+editCounter});
        var newEntry = dojo.create("td");
        newEntry.appendChild(newEditable);

        newRow.appendChild(newTime);
        newRow.appendChild(newEntry);
        container.appendChild(newRow);

        var editableSpan=dojo.byId("edit"+(editCounter-1));
        dojo.connect(editableSpan,'onclick',editableSpan,editBox);
        editableSpan=dojo.byId("edit"+editCounter);
        dojo.connect(editableSpan,'onclick',editableSpan,editBox);

        editCounter++;
      }

      function init(){
        var entryAdd=dojo.byId("AddEntry");
        dojo.connect(entryAdd,'onclick',null,addEntry);

      }

      dojo.addOnLoad(init);
    </script>
    
  </head>
  <body>
    <table class="topbar">
      <tr><td><a href="http://www.csiro.au/"><img src="csiro50spaced.gif"></a></td>
	<td>
	  <table class="topback">
	    <tr><td><span class="toptitle">CSIRO Astronomy & Space Science</span>
	      </td>
	    </tr>
	  </table>
	</td>
      </tr>
    </table>
    <div class="leftnav" id="left">
      <button id="AddEntry">Add Log Entry</button>
    </div>
    <div class="rightcontent" id="right">
      <table id="logEntries" class="logEntries">

      </table>
    </div>
  </body>
</html>
